<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017-05-09
  Time: 17:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <jsp:include page="head.jsp"/>
  <style type="text/css">
    body{
      overflow-x: hidden;
      overflow-y: hidden;
      background: url(${pageContext.request.contextPath}/static/blogAdmin/sys/images/bg-body.jpg);
    }
    .username{
      position: absolute;
      right:105px;
      top: 15px;
      text-align: right;
      color:white;
      font-size: 12px;
    }
    .flag{
      padding: 0px;
      margin: 0px;
    }
    .tabGuide{
      height: 20px;
      padding: 4px 15px 23px 100px;
      line-height: 20px;
      color: white;
      font-size: 12px;
    }
    .left-sidebar {
      position: fixed;
      bottom: 0;
      left: 0;
      padding-bottom: 50px;
      top: 50px;
    }

    .content-header {
      position: fixed;
      z-index: 1010;
      top: 50px;
      left: 220px;
      right: 0;
      margin: 0;
      -webkit-transition-property: left;
      -moz-transition-property: left;
      transition-property: left;
      -webkit-transition-duration: 0.25s;
      -moz-transition-duration: 0.25s;
      transition-duration: 0.25s;
      -webkit-transition-timing-function: ease-out;
      -moz-transition-timing-function: ease-out;
      transition-timing-function: ease-out;
      -webkit-transition-delay: 0;
      -moz-transition-delay: 0;
      transition-delay: 0;
    }
    .left-sidebar-collapsed .content .content-header {
      left: 60px;
    }
    .left-sidebar .nano-content {
      padding-bottom: 100px;
    }
    .leftside-content-header{
      line-height: 30px;
    }

  </style>
</head>
<body>

<div class="page-header">
  <div class="leftside-header">
  </div>
  <div class="rightside-header">
    <div class="header-middle"></div>

    <div class="header-section" id="user-headerbox">
      <div class="user-header-wrap">
        <div class="user-photo">
          <div class="up-img-cover" id="up-img-touch">
            <img class="am-circle" src="${userInfo.userImg}" data-am-popover="{content: &#39;点击上传&#39;, trigger: &#39;hover focus&#39;}">
          </div>
        </div>
        <div class="user-info">
         <span class="user-name" id="user-name">${userInfo.name}</span>
          <input type="hidden" id="userInfoEmail" value="${userInfo.email}">
          <input type="hidden" id="mobilePhone"  value="${userInfo.mobilePhone}">
          <input type="hidden" id="introduce"  value="${userInfo.introduce}">
          <input type="hidden" id="job"  value="${userInfo.job}">
          <span class="user-profile">管理员</span>
        </div>
        <i class="fa fa-plus icon-open" aria-hidden="true"></i>
        <i class="fa fa-minus icon-close" aria-hidden="true"></i>
      </div>
      <div class="user-options dropdown-box">
        <div class="drop-content basic">
          <ul>
            <li> <a href="#" id="userInfo"><i class="fa fa-user" aria-hidden="true"></i>个人信息</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="header-separator"></div>
    <div class="header-section">
      <a href="/admin/logout"><i class="fa fa-sign-out log-out" aria-hidden="true"></i></a>
    </div>
  </div>
</div>


<div class="page-body">
  <div class="left-sidebar">
    <div class="left-sidebar-header">
      <div class="left-sidebar-title">后台</div>
      <div class="left-sidebar-toggle c-hamburger c-hamburger--htla hidden-xs" data-toggle-class="left-sidebar-collapsed" data-target="html">
        <span></span>
      </div>
    </div>
    <div id="left-nav" class="nano has-scrollbar">
      <div class="nano-content" tabindex="0" style="right: -17px;">
        <nav>
          <ul class="nav" id="main-nav">
          </ul>
        </nav>
      </div>
      <div class="nano-pane" style="display: none;">
        <div class="nano-slider" style="height: 773px; transform: translate(0px, 0px);"></div>
      </div>
    </div>
  </div>

  <div class="content" style="background-color: #ECECEC">
    <div id = "center"  style=" height: 100%"  >
      <div id="tabs" class="easyui-tabs" data-options="fit:true,border:false"></div>
      <!-- 页脚信息 -->
    </div>
  </div>
  <div data-options="region:'south',border:false"
       style="height:20px; background:#F3F3F3; padding:2px; vertical-align:middle;font-size:12px;margin-left: 220px;">
    <span id="sysVersion" style="float:left;">系统版本：V1.0</span> <span id="nowTime" style="float:left;"></span>
    <span style="font-family:arial;display: inline-block; width:70%;text-align: center">&copy; CopyRight 2017-2027, cnc.</span>
  </div>
</div>

  <!-- 右键tabs菜单 -->
  <div id="mm" class="easyui-menu" style="width:150px;">
    <div id="mm-tabupdate">刷新</div>
    <div class="menu-sep"></div>
    <div id="mm-tabclose">关闭</div>
    <div id="mm-tabcloseall">全部关闭</div>
    <div id="mm-tabcloseother">除此之外全部关闭</div>
    <div class="menu-sep"></div>
    <div id="mm-tabcloseright">当前页右侧全部关闭</div>
    <div id="mm-tabcloseleft">当前页左侧全部关闭</div>
    <div class="menu-sep"></div>
    <div id="mm-exit">退出</div>
  </div>
  <jsp:include page="footer.jsp"/>
<script type="application/javascript">
  $(function(){
    $.post("/user/list/menu/${userInfo.id}", function(data){
      var menus = transformTozTreeFormat(data);//获取所有菜单
      var rootMenu = '';
      //设置导航菜单，并设置第一个默认选中
      rootMenu = rootMenu + " <li class='active-item'><a href='#'><i class='fa fa-home' aria-hidden='true'></i><span>首页</span></a></li>";
      if(menus){
        $.each(menus[0].children,function(idx,obj){

          if(obj.display == 1){

            rootMenu  = rootMenu +"<li class='has-child-item close-item'>";
            rootMenu  = rootMenu + "<a><i class='"+obj.icon+"' aria-hidden='true'></i><span>"+obj.name+"</span></a>";
            rootMenu = rootMenu + "<ul class='nav child-nav level-1'>";
            //重点
            if(obj.children){
              $.each(obj.children, function(i, n) {
                if(n){
                  rootMenu = rootMenu + "<li class='has-child-item close-item'><a class='flag' ref='"+n.id+"' href='#' rel='"+n.url+"' >"+n.name+"</a>";
                }else{
                  rootMenu = rootMenu + "<li>";
                }
                if(n.children){
                  rootMenu = rootMenu + "<ul class='nav child-nav level-2'>";
                  $.each(n.children, function(i, n) {
                    if(n){
                      rootMenu = rootMenu + "<li class='has-child-item close-item' rel='"+n.url+"'><a class='flag' ref='"+n.id+"' href='#' rel='"+n.url+"' >"+n.name+"</a></li>";
                    }else{
                      rootMenu = rootMenu + "<li></li>";
                    }
                  })
                  rootMenu = rootMenu + "</ul>";
                }
                rootMenu = rootMenu + "</li>";
              });
            }
            rootMenu = rootMenu + "</ul></li>"

            //end
          }
        });
        $("#main-nav").append(rootMenu);

      }
      var flag = 0;
      toastr.options = {
        "progressBar": true,
        "positionClass": "toast-bottom-right",
        "timeOut": 3500,
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "slideDown",
        "hideMethod": "fadeOut"
      };
      if(flag == 0){
        toastr.info('cnc', '<h5 style="margin-top: 0px; margin-bottom: 5px;"><b>欢迎回来！</b></h5>');
        flag = flag + 1;
      }
      function changeFrameHeight(){
        $("#tabs").height(($(window).height())*0.75);
        $("#content").height(($(window).height())*0.85);
        $("#nav").height(($(window).height())*0.8);
      }
      changeFrameHeight();
      window.onresize=function(){
        changeFrameHeight();
      }
      $('.flag').click(function(){
        var tabTitle = $(this).text();
        var url = $(this).attr("rel");
        var id = $(this).attr("ref");
        if (url.replace(/(^\s*)|(\s*$)/g, "").length != 0){
            addTab(tabTitle,url);
        }
        });
    });

   function getNowTime(){
    var nowTime = new Date();
    var now = nowTime.getFullYear()+"年"+(nowTime.getMonth()+1)+"月"+nowTime.getDate()+"日"+"    "+nowTime.getHours()+":"+nowTime.getMinutes()+":"+nowTime.getSeconds();
     $("#nowTime").html(now);
   }
    getNowTime();
    setInterval(function(){getNowTime();},1000);
  });
</script>
  <script src="${pageContext.request.contextPath}/static/blogAdmin/jquery/js/jquery.wysiwyg.js"></script>
  <script src="${pageContext.request.contextPath}/static/blogAdmin/common/js/custom.js"></script>
  <script src="${pageContext.request.contextPath}/static/blogAdmin/common/js/cycle.js"></script>
  <script src="${pageContext.request.contextPath}/static/blogAdmin/jquery/js/jquery.checkbox.min.js"></script>
  <script src="${pageContext.request.contextPath}/static/blogAdmin/jquery/js/jquery.tablesorter.min.js"></script>

</body>
</html>
